<template>
	<div class="home">
		<!-- charts -->
		<el-row :gutter="15" class="mt15" style="padding: 12px 15px;width: 100%;">
			<el-col :md="24" :lg="24" :xl="24" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>销量最差</span>

					</div>
					<div class="charts">
						<div class="charts-left mr7">
							<div ref="homeLaboratoryRef" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>

		</el-row>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
import axios  from 'axios';
export default {
	name: 'home',
	components: { Scroll },
	data() {
		return {
			recommendList,
			chartsRightList,
			newsInfoList,
			userInfo: {},
			requesturl:"http://162.14.107.118:8086/",//axios请求地址

		};
	},
	created() {
		this.initUserInfo();
	},
	computed: {
		currentTime() {
			return formatAxis(new Date());
		},
		optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
		getUserInfos() {
			return this.$store.state.userInfos.userInfos;
		},
	},
	mounted() {
	

	

		//PC得到卖的最多的六个产品
		this.getEndFoodName();

		
	
	},
	methods: {
		
		//PC获得热销菜品
		getEndFoodName(){
			axios.get(this.requesturl+"PC/getEndFood").then(res=>{
				let foodnameArr=[]
				let foodcountArr=[]

				res.data.data.forEach(item => {
					foodnameArr.push(item.foodname)
					foodcountArr.push(item.countfood)
				});

				const myChart = echarts.init(this.$refs.homeLaboratoryRef);
				const option = {
					grid: {
						top: 50,
						right: 20,
						bottom: 30,
						left: 30,
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: ['成交量'],
						right: 13,
					},
					xAxis: {
						data: foodnameArr,
					},
					yAxis: [
						{
							type: 'value',
							name: '数量',
						},
					],
					series: [
						{
							name: '成交量',
							type: 'bar',
							data: foodcountArr,
							itemStyle: {
								normal: {
									//这里是颜色
									color: function(params) {
										//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
										var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA',
										'#749f83', '#ca8622','#123456','#987654','#abcdef'];
										return colorList[params.dataIndex]
									}
								}
							}
						},
					],
				}
				myChart.setOption(option);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			})
		},
		

	
		// 初始化登录信息
		initUserInfo() {
			if (!Session.get('userInfo')) return false;
			this.userInfo = Session.get('userInfo');
			this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
		},
		// 消息通知当前项点击
		onNewsInfoListClick(v) {
			window.open(v.link);
		},
	
		
	},
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
